<template>
	<div class="poster">
		<van-icon
			name="arrow-left"
			size="34"
			:color="curPosterIndex > 0 ? '#5f88ff' : '#ababab'"
			class="handler"
			style="left: 10px"
			@click="() => curPosterIndex > 0 && curPosterIndex--"
		/>
		<div
			class="img"
			:style="{
				backgroundImage: `url(${posters[curPosterIndex]})`
			}"
		></div>
		<van-icon
			name="arrow"
			size="34"
			:color="posters.length > curPosterIndex + 1 ? '#5f88ff' : '#ababab'"
			class="handler"
			style="right: 10px"
			@click="posters.length > curPosterIndex + 1 && curPosterIndex++"
		/>
	</div>
	<div class="switch" v-show="distribution?.showName">
		是否展示姓名 <van-switch v-model="addName" size="" />
	</div>
	<div class="switch" v-show="distribution?.showMobile">
		是否展示手机号 <van-switch v-model="addPhone" size="" />
	</div>
	<div class="buttons">
		<div class="button" @click="canvasCreatePoster">
			<van-icon type="share"></van-icon>
			分享给微信好友
		</div>
		<div class="button" @click="canvasCreatePoster">保存海报</div>
	</div>
	<!-- <van-row justify="space-between" >
		<van-col span="8">
		</van-col>
		<van-col span="8">
		</van-col>
	</van-row> -->
	<div class="poster-big" v-show="showPoster">
		<van-icon
			name="cross"
			class="cross"
			size="34"
			color="#999"
			@click="showPoster = false"
		/>
		<img v-if="posterUrl" :src="posterUrl" alt="" />

		<div ref="tipRef" class="tips">海报已生成！长按图片分享或保存</div>
	</div>
</template>

<script>
import { distributorShare } from '@/api'
import { mapGetters } from 'vuex'
export default {
	data() {
		return {
			distribution: null,
			curPosterIndex: 0,
			canvas: null,

			showPoster: false,
			posterUrl: '',

			addName: false,
			addPhone: false
		}
	},
	computed: {
		...mapGetters(['userInfo']),
		id() {
			return this.$route.query.id
		},
		posters() {
			const { distribution } = this
			if (distribution && distribution.img) {
				return distribution.img.split(',')
			}
			return []
		}
	},
	mounted() {
		distributorShare(this.id).then(({ data }) => {
			this.distribution = data.distribution
			this.addName = !!data.distribution.showName
			this.addPhone = !!data.distribution.showMobile
			this.qrCode = data.qrCode
		})
		this.canvas = document.createElement('canvas')
		this.canvas.style = 'width: 100%;display: block'
	},
	methods: {
		canvasCreatePoster() {
			const { canvas } = this
			var img = document.createElement('img')
			//if (process.env.NODE_ENV !== 'development') {
			img.setAttribute('crossOrigin', 'anonymous') //关键
			img.crossOrigin = 'Anonymous'
			//}
			img.src = this.posters[this.curPosterIndex] + '?t=' + Date.now()
			const ctx = canvas.getContext('2d')

			img.onload = () => {
				canvas.width = img.naturalWidth
				canvas.height = img.naturalHeight
				ctx.drawImage(img, 0, 0)

				img.src = this.qrCode + '?t=' + Date.now()

				img.onload = () => {
					const { width, hight: height, qrx, qry } = this.distribution
					ctx.drawImage(
						img,
						0,
						0,
						img.naturalWidth,
						img.naturalHeight,
						qrx,
						qry,
						width,
						height
					)

					let text = ''
					if (this.addName) {
						text += '推广人员：' + this.userInfo.name + ' '
					}
					if (this.addPhone) {
						text += this.userInfo.mobile
					}
					const x = canvas.width / 20
					const y = canvas.height - x
					const maxWidth = canvas.width - 2 * x

					ctx.font = '35px sans-serif'
					ctx.fillStyle = '#FFF'
					ctx.fillText(text, x, y, maxWidth)

					// debugger

					this.showPoster = true

					//if (process.env.NODE_ENV !== 'development') {
					this.posterUrl = canvas.toDataURL()
					//} else {
					// const tipRef = this.$refs.tipRef
					// tipRef.parentElement.insertBefore(canvas, tipRef)
					//}
				}
			}
		}
	},
	components: {}
}
</script>

<style lang="scss" scoped="scoped">
.poster {
	position: relative;
	height: 750px;

	margin: $space_6 auto;
	.img {
		width: 620px;
		height: 100%;
		margin: 0 auto;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}
}

.switch {
	font-size: $font_medium;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: $space_2 0;
	width: 600px;
	margin: 0 auto;
}
.buttons {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: $space_2 0;
	width: 600px;
	margin: 0 auto;
}
.button {
	padding: $space_3;
	font-size: $font_medium;
	color: #fff;
	border-radius: 99px;
	background: $color_main;
	text-align: center;
}

.handler {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.poster-big {
	position: fixed;
	background-color: #fff;
	z-index: 2;
	// top: 50%;
	// left: 50%;
	// transform: translate(-50%, -50%);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	// width: 700px;
	// min-height: 1100px;
	// border-radius: 20px;
	// background: rgba(255, 255, 255, 0.14);
	padding: 14px;
	overflow-y: auto;
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-direction: column;

	img,
	canvas {
		display: block;
		width: 100%;
		height: auto;
	}

	.cross {
		position: absolute;
		top: 25px;
		right: 25px;
	}
}
.tips {
	border: 1px solid #999;
	border-radius: 99px;
	color: #999;
	padding: $space_2;
	// font-size: $font_small;
	white-space: nowrap;
}
</style>
